<template>
  <div class="demo-classicPage-point" >
      <Form ref="pointForm" :label-width="100" label-position="left" :model="formData"  :rules="ruleValidate" style="margin-left: 100px;margin-top: 40px">
          <!--<span style="color: #A8AFB2;margin-left: -10px">计量点常用配置</span>-->
          <!--<Form-item label="计量点编号"  prop="pointCode" style="margin-top: 10px">-->
              <!--<Input v-if="editFlag" disabled  v-model="formData.pointCode" class="input-style" ></Input>-->
              <!--<span v-if="!editFlag" class="span-style">{{formData.pointCode}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="计量点名称"  prop="pointName">-->
              <!--<Input v-if="editFlag"  placeholder="输入计量点名称" v-model="formData.pointName" class="input-style"></Input>-->
              <!--<span v-if="!editFlag"  class="span-style">{{formData.pointName}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="计量点类型" prop="pointType" >-->
              <!--<Select v-if="editFlag" filterable  v-model="formData.pointType"  placeholder="输入、选择计量点类型" class="input-style">-->
                  <!--<Option  v-for="item in POINTTYPE" :value="item.value"  :key="item.key">{{item.desc}}</Option>-->
              <!--</Select>-->
              <!--<span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(POINTTYPE,formData.pointType,'value','desc')}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="称重类型" prop="weiType" >-->
              <!--<Select v-if="editFlag" filterable  v-model="formData.weiType"  placeholder="输入、选择计量点类型" class="input-style">-->
                  <!--<Option  v-for="item in WEITYPE" :value="item.value"  :key="item.key">{{item.desc}}</Option>-->
              <!--</Select>-->
              <!--<span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(WEITYPE,formData.weiType,'value','desc')}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="零点值" >-->
              <!--<Input v-if="editFlag"  placeholder="输入计量点名称" v-model="formData.zeroValue" class="input-style"></Input>-->
              <!--<span v-if="!editFlag"  class="span-style">{{formData.zeroValue}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="分度值" >-->
              <!--<Input v-if="editFlag"  placeholder="输入分度值" v-model="formData.scaleValue" class="input-style"></Input>-->
              <!--<span v-if="!editFlag"  class="span-style">{{formData.scaleValue}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="派位分组"  >-->
              <!--<Select v-if="editFlag" filterable  v-model="formData.group"  placeholder="输入、选择计量点类型" class="input-style">-->
                  <!--<Option  v-for="item in GROUP" :value="item.value"  :key="item.key">{{item.desc}}</Option>-->
              <!--</Select>-->
              <!--<span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(GROUP,formData.group,'value','desc')}}</span>-->
          <!--</Form-item>-->
          <!--<Form-item label="备注">-->
              <!--<Input v-if="editFlag" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."  v-model="formData.remark" class="input-style" style="width: 400px;"></Input>-->
              <!--<span v-if="!editFlag"  class="span-style">{{formData.remark}}</span>-->
          <!--</Form-item>-->
          <Checkbox v-model="openFlag"> </Checkbox><span style="color: #A8AFB2;">启用报警参数设置</span>
          <div style="width: 100%;background: white;height: 180px;margin-top: 10px" v-if="openFlag">
              <div style="height: 10px"></div>
              <span class="span-style" style="margin-left: 25px;">报警参数设置</span>
              <table style="margin-left: 25px">
                  <tr>
                      <td style="width: 100px">最大量程</td>
                      <td style="width: 250px"><Input placeholder="输入最大量程" v-model="formData.most" class="ivu-form-item-width-s"></Input></td>
                      <td style="width: 110px;">毛皮时间差</td>
                      <td><Input placeholder="输入毛皮时间差" v-model="formData.date" class="ivu-form-item-width-s"></Input></td>
                  </tr>
                  <div style="height: 10px"></div>
                  <tr >
                      <td>皮重偏差率</td>
                      <td><Input placeholder="输入皮重偏差率" v-model="formData.pre" class="ivu-form-item-width-s"></Input></td>
                      <td>一次数据有效天数</td>
                      <td><Input placeholder="输入一次数据有效天数" v-model="formData.day" class="ivu-form-item-width-s"></Input></td>
                  </tr>
                  <div style="height: 10px"></div>
                  <tr>
                      <td  >剩余纸张数</td>
                      <td><Input placeholder="输入剩余纸张数" v-model="formData.paper" class="ivu-form-item-width-s"></Input></td>
                  </tr>
              </table>
          </div>

          <h2 style="margin-top: 40px">HTML代码</h2>
          <pre>
         <code class="html" v-text="htmlCode">
         </code>
        </pre>


      </Form>
      <Form ref="pointForm1" :label-width="100" label-position="left" :model="formData"  :rules="ruleValidate" style="margin-left: 100px;margin-top: 40px">
          <span style="color: #A8AFB2;margin-left: -10px">计量点常用配置</span>
          <Form-item label="计量点编号"  prop="pointCode" style="margin-top: 10px">
          <Input v-if="editFlag" disabled  v-model="formData.pointCode" class="input-style" ></Input>
          <span v-if="!editFlag" class="span-style">{{formData.pointCode}}</span>
          </Form-item>
          <Form-item label="计量点名称"  prop="pointName">
          <Input v-if="editFlag"  placeholder="输入计量点名称" v-model="formData.pointName" class="input-style"></Input>
          <span v-if="!editFlag"  class="span-style">{{formData.pointName}}</span>
          </Form-item>
          <Form-item label="计量点类型" prop="pointType" >
          <Select v-if="editFlag" filterable  v-model="formData.pointType"  placeholder="输入、选择计量点类型" class="input-style">
          <Option  v-for="item in POINTTYPE" :value="item.value"  :key="item.key">{{item.desc}}</Option>
          </Select>
          <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(POINTTYPE,formData.pointType,'value','desc')}}</span>
          </Form-item>
          <Form-item label="称重类型" prop="weiType" >
          <Select v-if="editFlag" filterable  v-model="formData.weiType"  placeholder="输入、选择计量点类型" class="input-style">
          <Option  v-for="item in WEITYPE" :value="item.value"  :key="item.key">{{item.desc}}</Option>
          </Select>
          <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(WEITYPE,formData.weiType,'value','desc')}}</span>
          </Form-item>
          <Form-item label="零点值" >
          <Input v-if="editFlag"  placeholder="输入计量点名称" v-model="formData.zeroValue" class="input-style"></Input>
          <span v-if="!editFlag"  class="span-style">{{formData.zeroValue}}</span>
          </Form-item>
          <Form-item label="分度值" >
          <Input v-if="editFlag"  placeholder="输入分度值" v-model="formData.scaleValue" class="input-style"></Input>
          <span v-if="!editFlag"  class="span-style">{{formData.scaleValue}}</span>
          </Form-item>
          <Form-item label="派位分组"  >
          <Select v-if="editFlag" filterable  v-model="formData.group"  placeholder="输入、选择计量点类型" class="input-style">
          <Option  v-for="item in GROUP" :value="item.value"  :key="item.key">{{item.desc}}</Option>
          </Select>
          <span v-if="!editFlag"  class="span-style">{{dictionaryIdToDesc(GROUP,formData.group,'value','desc')}}</span>
          </Form-item>
          <Form-item label="备注">
          <Input v-if="editFlag" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."  v-model="formData.remark" class="input-style" style="width: 400px;"></Input>
          <span v-if="!editFlag"  class="span-style">{{formData.remark}}</span>
          </Form-item>
          <Checkbox v-model="openFlag"> </Checkbox><span style="color: #A8AFB2;">启用报警参数设置</span>
          <div style="width: 100%;background: white;height: 180px;margin-top: 10px" v-if="openFlag">
              <div style="height: 10px"></div>
              <span class="span-style" style="margin-left: 25px;">报警参数设置</span>
              <table style="margin-left: 25px">
                  <tr>
                      <td style="width: 100px">最大量程</td>
                      <td style="width: 250px"><Input placeholder="输入最大量程" v-model="formData.most" class="ivu-form-item-width-s"></Input></td>
                      <td style="width: 110px;">毛皮时间差</td>
                      <td><Input placeholder="输入毛皮时间差" v-model="formData.date" class="ivu-form-item-width-s"></Input></td>
                  </tr>
                  <div style="height: 10px"></div>
                  <tr >
                      <td>皮重偏差率</td>
                      <td><Input placeholder="输入皮重偏差率" v-model="formData.pre" class="ivu-form-item-width-s"></Input></td>
                      <td>一次数据有效天数</td>
                      <td><Input placeholder="输入一次数据有效天数" v-model="formData.day" class="ivu-form-item-width-s"></Input></td>
                  </tr>
                  <div style="height: 10px"></div>
                  <tr>
                      <td  >剩余纸张数</td>
                      <td><Input placeholder="输入剩余纸张数" v-model="formData.paper" class="ivu-form-item-width-s"></Input></td>
                  </tr>
              </table>
          </div>
      </Form>
  </div>
</template>
<script>
export default {
  data () {
    return {
        POINTTYPE:[{value: '1', desc: '皮带秤'}, {value: '2', desc: '汽车衡'}],
        WEITYPE: [{value: '1', desc: '本地计量文林'}, {value: '2', desc: '其他计量'}],
        GROUP:[{value: '1', desc: '一组'}, {value: '2', desc: '二组'}],
        editFlag: true,
        openFlag:true,
        htmlCode: ' <Checkbox v-model="openFlag"> </Checkbox><span style="color: #A8AFB2;">启用报警参数设置</span>\n' +
        '          <div style="width: 100%;background: white;height: 180px;margin-top: 10px" v-if="openFlag">\n' +
        '              <div style="height: 10px"></div>\n' +
        '              <span class="span-style" style="margin-left: 25px;">报警参数设置</span>\n' +
        '              <table style="margin-left: 25px">\n' +
        '                  <tr>\n' +
        '                      <td style="width: 100px">最大量程</td>\n' +
        '                      <td style="width: 250px"><Input placeholder="输入最大量程" v-model="formData.most" class="ivu-form-item-width-s"></Input></td>\n' +
        '                      <td style="width: 110px;">毛皮时间差</td>\n' +
        '                      <td><Input placeholder="输入毛皮时间差" v-model="formData.date" class="ivu-form-item-width-s"></Input></td>\n' +
        '                  </tr>\n' +
        '                  <div style="height: 10px"></div>\n' +
        '                  <tr >\n' +
        '                      <td>皮重偏差率</td>\n' +
        '                      <td><Input placeholder="输入皮重偏差率" v-model="formData.pre" class="ivu-form-item-width-s"></Input></td>\n' +
        '                      <td>一次数据有效天数</td>\n' +
        '                      <td><Input placeholder="输入一次数据有效天数" v-model="formData.day" class="ivu-form-item-width-s"></Input></td>\n' +
        '                  </tr>\n' +
        '                  <div style="height: 10px"></div>\n' +
        '                  <tr>\n' +
        '                      <td  >剩余纸张数</td>\n' +
        '                      <td><Input placeholder="输入剩余纸张数" v-model="formData.paper" class="ivu-form-item-width-s"></Input></td>\n' +
        '                  </tr>\n' +
        '              </table>\n' +
        '          </div>',
        formData: {
            pointCode: 'MP0001',
            pointName: '1#皮带秤',
            pointType: '1',
            weiType: '1',
            zeroValue: '10',
            scaleValue: '1',
            group: '1',
            remark: '(* ￣3)(ε￣ *)',
            paper: '',
            day: '',
            pre: '',
            date:'',
            most:''
        },
        ruleValidate : {
            pointCode: [
                { required: true, message: '计量点编号不能为空', trigger: 'change' }
            ],
            pointName: [
                { required: true, message: '计量点名称不能为空', trigger: 'change' }
            ],
            pointType: [
                { required: true, message: '计量点类型维修厂', trigger: 'change' }
            ],
            weiType:[
                { required: true, message: '称重类型不能为空', trigger: 'change' }
            ]
        }
    }
  }


}
</script>
<style  scoped lang="scss">
    .demo-classicPage-point {
        min-width: 900px;
        width: 900px;
        .input-style {
            width: 250px;
        }
        .span-style {
            color: #A8AFB2;
        }
    }

</style>
